import { RadiusUprightOutlined } from '@ant-design/icons';
import { InputNumber, Popover } from 'antd';
import { TextWidget } from '@inbiz/react';
import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
import './index.less';

type Iprops = {
  value: string;
  onChange: (data: Object) => void;
  values: any;
  webSiteId: string;
};
function Radius(props: Iprops): ReactElement {
  const [controlSelect, $controlSelect] = useState(() => {
    if (props.value) {
      let lists = props.value.split(' ').map((item) => parseInt(item));
      switch (lists.length) {
        case 1:
          lists = [lists[0], lists[0], lists[0], lists[0]];
          break;
        case 2:
          lists = [lists[0], lists[1], lists[1], lists[0]];
          break;
        case 3:
          lists = [lists[0], lists[1], lists[1], lists[2]];
          break;
      }
      const number = Math.max.apply(Math, lists);
      return {
        number,
        select: number ? lists.map((item) => item / number) : [1, 1, 1, 1],
      };
    } else {
      return {
        number: 0, //角的大小
        select: [1, 1, 1, 1], //对应4个角   1为选中 0为未选中
      };
    }
  });
  const [controlVisibel, $controlVisibel] = useState<boolean>(false);

  const changeSelect = useCallback((index) => {
    $controlSelect((controlSelect) => {
      const newData = { ...controlSelect, select: [...controlSelect.select] };
      let i = index;
      switch (index) {
        case 2:
          i = 3;
          break;
        case 3:
          i = 2;
          break;
        default:
      }
      newData.select[i] = newData.select[i] ? 0 : 1;
      return newData;
    });
  }, []);
  const handleInputChange = useCallback((value) => {
    $controlSelect((controlSelect) => {
      const newData = { select: [...controlSelect.select], number: value || 0 };
      return newData;
    });
  }, []);

  const radius = useMemo(() => {
    const list = controlSelect.select.map(
      (item) => `${item * controlSelect.number}px`,
    );
    return list.join(' ');
  }, [controlSelect]);

  useEffect(() => {
    props.onChange(radius);
  }, [radius]);

  return (
    <div className="whtie-tpl-components-radius">
      <InputNumber
        min={0}
        onChange={handleInputChange}
        value={controlSelect.number}
      />
      <Popover
        content={() => (
          <div className="whtie-tpl-components-control-content">
            {controlSelect.select.map((item, index) => {
              return (
                <div
                  key={index + 'controlItem'}
                  className="controlItem"
                  onClick={() => {
                    changeSelect(index);
                  }}
                >
                  {' '}
                </div>
              );
            })}
            <div className="ControlMain" style={{ borderRadius: radius }}></div>
          </div>
        )}
        placement="bottomRight"
        trigger="click"
        visible={controlVisibel}
        onVisibleChange={() => $controlVisibel(!controlVisibel)}
      >
        <div className="radiusImg">
          <RadiusUprightOutlined
            style={{
              transform: 'scale(1.4)',
              color: '#000',
              cursor: 'pointer',
            }}
          />
        </div>
      </Popover>
    </div>
  );
}
export default Radius;
